<script setup lang="ts">
import { ref,reactive} from 'vue';
import demo from "./components/demo.vue"

const name = ref<string>("qqqqqqq")
const person = {
  name:"lisi",
  age:489
}
interface Per{
  name:string,
  age:number
}
const p = ref<Per>(person)
p.value.age = 678

const p1 = reactive<{
  name:string,
  age:number
}>({name:"uhe",age:78})


function addA(v:number,b:string){
  console.log(v)
  console.log(b)

  p.value.age++
}

</script>

<template>
  <div id="gen">
    <div>根组件</div>
    <div>{{ p.name }}</div>
    <div>{{ p.age }}</div>
    <demo :age="p.age" @add="addA" v-slot="{item}">
      <!-- <template #default="o"> -->
        <h1>{{ item.name }}</h1>
      <div>{{ item.age }}</div>
      <!-- </template> -->
      <!-- <template #foot>
        <div>foot</div>
      </template> -->
      
    </demo>
  </div>
  
</template>

<style scoped>
  #gen{
    background-color: bisque;
    padding: 20px;
    border-radius: 10px;
   }
</style>
